<template>
	<view>
		<view class="top">
			<view class="avatar dflex alc jcsb pl50 pr40" @getphonenumber="getPhoneNumber">
				<view class="dflex alc">
					<view class="dflex alc"><image src="../../static/avatar.jpg" mode=""></image></view>
					<view class="dflex text pl24">
						<text class="fs36 color fw900 mb10">薛定谔的猫</text>
						<button open-type="getPhoneNumber" ></button>
					</view>
				</view>
				<view><image src="../../static/right.png"></image></view>
			</view>
			<view class="big">
				<view class="bgbox">
					<view class="dflex alc jcsb">
						<view class="dflex flexc pl40 mt30">
							<text class="fw500 fs28 white">我的余额(元)</text>
							<text class="fs60 fw900 white">8720.99</text>
						</view>
						<view class="tximg dflex alc">
							<image src="../../static/tixian.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="filter"></view>
			</view>
		</view>
		<view
			class="cell mb64"
			v-for="(item, index) in imgList"
			:key="item.id"
			@click="cellChange(index)"
		>
			<cell :src="item.src" :name="item.name"></cell>
		</view>
		<tabbar :select="2"></tabbar>
		<!-- 选择次数 -->
		<u-picker
			:show="showPicter"
			ref="uPicker"
			:columns="columns"
			@confirm="confirm"
			@cancel="cancel"
			@change="changeHandler"
			keyName="label"
			title="您希望孩子每天最多消费多少次"
		></u-picker>
	</view>
</template>

<script>
import tabbar from '@/components/tabbar/tabbar.vue';
import cell from '@/components/cell/cell.vue';
export default {
	components: { tabbar, cell },
	data() {
		return {
			nums: '',
			showPicter: false,
			columns: [
				[
					{
						label: '一次',
						id: 1
						// ...
					},
					{
						label: '两次',
						id: 2
					},
					{
						label: '三次',
						id: 3
					}
				]
			],
			imgList: [
				{
					id: 1,
					src: '../../static/jihuo.png',
					name: '新卡激活'
				},
				{
					id: 2,
					src: '../../static/students.png',
					name: '学生信息'
				},
				{
					id: 3,
					src: '../../static/online.png',
					name: '在线充值'
				},
				{
					id: 4,
					src: '../../static/xiangou.png',
					name: '限购次数'
				},
				{
					id: 5,
					src: '../../static/chongzhi.png',
					name: '充值记录'
				},
				{
					id: 6,
					src: '../../static/xiaofei.png',
					name: '消费记录'
				},
				{
					id: 7,
					src: '../../static/diushi.png',
					name: '卡片遗失'
				},
				{
					id: 8,
					src: '../../static/guanyu.png',
					name: '关于我们'
				}
			]
		};
	},
	methods: {
		cellChange(index) {
			if (index === 0) {
				uni.navigateTo({
					url: '/pages/activation/activation'
				});
			} else if (index === 1) {
				uni.navigateTo({
					url: '/pages/stuinformation/stuinformation'
				});
			} else if (index === 2) {
				uni.navigateTo({
					url: '/pages/onlinerecharge/onlinerecharge'
				});
			} else if (index === 3) {
				this.showPicter = true;
			} else if (index === 4) {
				uni.navigateTo({
					url: '/pages/rechargerecord/rechargerecord'
				});
			} else if (index === 5) {
				uni.navigateTo({
					url: '/pages/swipingrecord/swipingrecord'
				});
			} else if (index === 6) {
				uni.navigateTo({
					url: '/pages/lose/lose'
				});
			} else if (index === 7) {
				uni.navigateTo({
					url: '/pages/ahoutus/ahoutus'
				});
			}
		},
		confirm(e) {
			console.log(e.value[0].id, e.value[0].label);
			uni.setStorageSync('nums', e.value[0].label);
			this.showPicter = false;
		},
		changeHandler(e) {
			console.log(e, 'changeHandler');
		},
		cancel() {
			this.showPicter = false;
		},
		getPhoneNumber(e) {
 console.log(e);
		}
	}
};
</script>

<style lang="scss">
.top {
	width: 750rpx;
	height: 592rpx;
	background-image: url('https://www.chejingjing.cn/uploads/imgs/20221221/54cbe20135b5dffde1546caef142b576.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	overflow: hidden;
	.avatar {
		margin-top: 110rpx;
		& > view:nth-child(1) {
			image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
			}
			.text {
				flex-direction: column;
			}
		}
		& > view:nth-child(2) {
			image {
				width: 30rpx;
				height: 30rpx;
			}
		}
	}
}
.big {
	width: 750rpx;
	height: 250rpx;
	position: relative;
	margin-top: 62rpx;
	.bgbox {
		width: 650rpx;
		height: 250rpx;
		margin: 0 auto;
		background: linear-gradient(90deg, #8092eb 0%, #4151db 100%);
		box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(65, 81, 219, 0.8);
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		.tximg {
			position: absolute;
			right: 20rpx;
			top: 60rpx;
			image {
				width: 168rpx;
				height: 80rpx;
			}
		}
	}
	.filter {
		width: 750rpx;
		height: 186rpx;
		background-image: url('https://www.chejingjing.cn/uploads/imgs/20221221/c3271d93b902b9d8e95b71a18e9ed110.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: absolute;
		bottom: -120rpx;
		left: 0;
	}
}
.cell:nth-child(9) {
	padding-bottom: 150rpx !important;
}
::v-deep .u-toolbar__title {
	margin-top: 171rpx;
	z-index: 999;
	display: block;
	width: 750rpx;
	padding: 0 !important;
	color: #333 !important;
}
</style>
